<template>
    <div class="boxArticle" v-loading.fullscreen.lock="loadingBox" element-loading-text="正在提交">
        <el-form :model="JsonList" label-width="120px" v-show="ShowNumbers">
            <el-form-item label="Mark Title">
                <el-input v-model="JsonList.TitleMark" placeholder="标记主题" />
            </el-form-item>
            <el-form-item label="Formal Title">
                <el-input v-model="JsonList.TitleFormal" placeholder="正式主题" />
            </el-form-item>
            <el-form-item label="Short Title">
                <el-input v-model="JsonList.TitleShort" placeholder="短主题" />
            </el-form-item>
            <el-form-item label="导读">
                <el-input v-model="JsonList.Intro" type="textarea" placeholder="New article" />
            </el-form-item>
            <div style="border: 1px solid #ccc;margin-left:20px;">
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
                <Editor style="height: 300px; overflow-y: hidden;" v-model="JsonList.Richtext" :defaultConfig="editorConfig"
                    @onCreated="handleCreated" />
            </div>
            <el-form-item label="Take Effect">
                <el-select v-model="JsonList.NumTE030" placeholder="生效">
                    <el-option label="生效" value="1" />
                    <el-option label="不生效" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="Keyword">
                <el-input v-model="JsonList.Keyword" placeholder="Keyword" />
            </el-form-item>
            <el-form-item label="Source">
                <el-input v-model="JsonList.StrSource" style="width:200px" placeholder="Source" />
            </el-form-item>
        </el-form>
        <FileService v-show="!ShowNumbers"></FileService>
        <div class="newArticle">
            <div class="bottomLeft" @click="Recover">返回</div>
            <div class="bottomRight">
                <span @click="Reset">重置</span>
                <span @click="componentShow">文件管理</span>
                <span @click="UpdateDataRow2">提交</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import FileService from './FileService.vue'
import { reactive, getCurrentInstance, onMounted, onBeforeUnmount, shallowRef, ref, nextTick } from 'vue'
import { UpdateDataRow, DetailedDataRow } from '@/api/SystemMgt.js'
import { ElMessage, ElLoading } from 'element-plus'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
const { proxy } = getCurrentInstance();
//===获取栏目号
let CurrentDataGroup = JSON.parse(window.sessionStorage.getItem('datas')).NumDataGroup;

let JsonList = ref([])
function DetailedList() {
    let msgData = { CurrentDataGroup: CurrentDataGroup, StrPrimaryKey: proxy.$route.query.StrPrimaryKey }
    DetailedDataRow(msgData).then((res) => {
        // console.log(res);
        JsonList.value = res.Payload
        //深拷贝
        window.sessionStorage.setItem("DataList", JSON.stringify(res.Payload))
    })
}
DetailedList()
//一、返回上一个页面
function Recover() {
    proxy.$router.go(-1)
}
//二、提交，修改成功，返回上一个页面
let loadingBox = ref(false)
function UpdateDataRow2() {
    // 请求参数
    let newForm = Object.assign(JsonList.value, { "CurrentDataGroup": CurrentDataGroup })
    loadingBox.value = true
    //调用修改文章接口
    UpdateDataRow(newForm).then((res) => {
        // console.log(res);
        loadingBox.value = false
        ElMessage({
            message: '提交成功或者修改成功',
            type: 'success',
        })
        proxy.$router.go(-1)
    })
}
//三、重置按钮
function Reset() {
    //===获取详细数据
    let DataList = JSON.parse(window.sessionStorage.getItem('DataList'));
    JsonList.value.TitleMark = DataList.TitleMark;
    JsonList.value.TitleFormal = DataList.TitleFormal;
    JsonList.value.TitleShort = DataList.TitleShort;
    JsonList.value.Intro = DataList.Intro;
    JsonList.value.NumTE030 = DataList.NumTE030;
    JsonList.value.richText = DataList.richText;
    JsonList.value.Keyword = DataList.Keyword;
    JsonList.value.StrSource = DataList.StrSource;
}
//四、文件管理
let ShowNumbers = ref(true)
function componentShow() {
    ShowNumbers.value = !ShowNumbers.value
}
onMounted(() => {
    // 模拟 ajax 异步获取内容
    // setTimeout(() => {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    // }, 3000)
    DetailedList()
})
// 四、副文本组件
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
// const valueHtml = ref('<p>hello</p>')
const toolbarConfig = {}
//当没有值时。提示
const editorConfig = { placeholder: '请输入内容...' }
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>

<style scoped>
.boxArticle {
    padding: 10px;
    position: relative;
    min-height: 860px;
    /* overflow: scroll; */
    /* padding-bottom: 100px; */
}

.newArticle {
    height: 50px;
    background-color: rgb(242, 243, 243);
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 50px;
    text-align: right;
    width: 100%;
    /* color: #3333; */
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.bottomLeft {
    line-height: 50px;
    margin-left: 20px;
    cursor: pointer;
    color: rgb(152, 153, 153);
}

.bottomLeft:hover {
    color: rgb(67, 134, 235);
    background-color: rgb(212, 211, 211);
}

.bottomRight span {
    margin: 0 20px;
    cursor: pointer;
    color: rgb(152, 153, 153);
    padding: 0 5px;
    line-height: 50px;
    display: inline-block
}

.bottomRight span:hover {
    color: rgb(67, 134, 235);
    background-color: rgb(220, 220, 221);
}
</style>
